<template>
  <el-container>
    <el-header>
      <el-row type="flex">
        <el-col :span="6">
          <el-input v-model="searchRole" placeholder="输入角色名" style="width: 70%" clearable @clear="getRoleList"></el-input>
          <el-button type="primary" @click="getRoleList">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="info" @click="dialogVisible = true">添加角色</el-button>
          <el-dialog
              title="添加"
              :visible.sync="dialogVisible"
              :append-to-body="true"
              width="30%">
            <el-form :model="roleAddForm" label-width="auto" size="small">
              <el-form-item label="角色名：">
                <el-input v-model="roleAddForm.roleName"></el-input>
              </el-form-item>
              <el-form-item label="角色描述：">
                <el-input v-model="roleAddForm.roleDesc"></el-input>
              </el-form-item>
              <el-form-item label="所有资源：">
                <el-input v-model="roleAddForm.roleName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="info" @click="addRole">添加</el-button>
                <el-button type="info" @click="dialogVisible = false">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-col>

      </el-row>
    </el-header>
    <el-main>
      <el-table :data="roleList">
        <el-table-column label="角色名" width="180" prop="roleName" />
        <el-table-column label="角色描述" width="180" prop="roleDesc" />
        <el-table-column label="创建时间" width="180" prop="createTime" :formatter="timeFilter"/>
        <el-table-column label="修改时间" width="180" prop="updateTime" :formatter="timeFilter"/>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="">修改</el-button>
            <el-button type="text" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="sizePage"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </el-main>

  </el-container>
</template>

<script>
import { addRole, roleList} from "@/api/Role";
import {formateDate} from "@/util/TimeFormat";

export default {
  name: "RoleTab",
  data(){
    return{
      roleList: [],
      currentPage: 1,
      sizePage: 10,
      total: 0,
      dialogVisible: false,
      roleAddForm: {},
    }
  },
  created() {
    this.init()
  },

  methods: {

    init(){
      this.getRoleList()
    },

    addRole(){
      let roleAddForm = this.roleAddForm;
      addRole(roleAddForm).then(res => {

      })
    },

    handleSizeChange(val){},

    handleCurrentChange(val){},

    getRoleList(){
      roleList(undefined, this.currentPage, this.sizePage).then(res => {
        this.roleList = res.data.data.list
      })
    },

    timeFilter(row, column, cellValue, index){
      var date = new Date(cellValue * 1000);
      return formateDate(date, "yyyy年MM月dd日")
    },
  }
}
</script>

<style scoped>

</style>
